<template>
  <div>
    递归菜单，基于element-ui封装
    <p>template</p>
    <my-menu1 :data="data"></my-menu1>
    <hr />
    <p>render</p>
    <my-menu2 :data="data"></my-menu2>
  </div>
</template>
<script>
import myMenu1 from "./my-menu.vue"; //template写法
import myMenu2 from "./my-menu.js"; //render写法
export default {
  components: {
    "my-menu1": myMenu1,
    "my-menu2": myMenu2,
  },
  data() {
    return {
      data: [
        { title: "根 1", id: 1 },
        {
          title: "根 2",
          id: 2,
          children: [
            {
              title: "根 2-1",
              id: 21,
              children: [
                { title: "根 2-1-1", id: 211 },
                { title: "根 2-1-2", id: 212 },
              ],
            },
          ],
        },
        { title: "根 3", id: 3 },
        {
          title: "根 4",
          id: 4,
          children: [
            { title: "根 4-1", id: 41 },
            { title: "根 4-2", id: 42 },
          ],
        },
      ],
    };
  },
};
</script>